<template>
  <div class="app-container">

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column
        width="140"
        align="center"
        label="ID"
        prop="id"
        sortable
      />

      <el-table-column align="center" label="用户id" prop="userId"/>
      <el-table-column align="center" label="是否分配" prop="isAllot">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isAllot == 0" type="danger">否</el-tag>
          <el-tag v-else>是</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="是否取消排队" prop="isCancel" width="140"/> -->
      <el-table-column align="center" label="排队序号" prop="sortIndex"/>
      <el-table-column align="center" label="创建日期" prop="createTime"/>
      <el-table-column align="center" label="修改日期" prop="updateTime"/>

      <!-- <el-table-column
        align="center"
        label="操作"
        class-name="small-padding fixed-width"
        width="380"
      >
        <template slot-scope="scope">
          <el-button
            v-permission="['GET /admin/service/type/update']"
            type="primary"
            size="mini"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>

          <el-button
            v-permission="['GET /admin/role/permissions']"
            type="primary"
            size="mini"
            @click="handlePermission(scope.row)"
          >指标维护
          </el-button
          >

          <el-button
            v-permission="['GET /admin/role/permissions']"
            type="primary"
            size="mini"
            @click="handleProblemMaintenance(scope.row)"
          >问题维护
          </el-button
          >

          <el-button
            v-permission="['POST /admin/service/type/delete']"
            type="danger"
            size="mini"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<style>
</style>

<script>
  import {
    queueList
  } from '@/api/queue'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
    name: 'Admin',
    components: { Pagination },
    data() {
      return {
        permLoading: false,
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          sort: '',
          order: '',
          limit: 20
        },
        dataForm: {
          id: 0,
          name: undefined,
          name: undefined,
          enable: true
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        saveLoading: false,
        rules: {
          name: [{ required: true, message: '不能为空', trigger: 'blur' }],
          name: [{ required: true, message: '不能为空', trigger: 'blur' }],
          enable: [{ required: true, message: '不能为空', trigger: 'blur' }]
        }
      }
    },
    computed: {},
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        queueList(this.listQuery)
          .then((response) => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      resetForm() {
        this.dataForm = {
          id: 0,
          name: undefined,
          name: undefined,
          enable: true
        }
      }
    }
  }
</script>
